import React from 'react'
import Code from './Code'
import Tip from '../ui-components/tip'
import Link from '../ui-components/link'
import style from './style'
import styleApp from './style.app'
import cx from 'classnames'

const T = Tip(class extends React.Component {
	render() {
		return (
			<div>hello, world</div>
		)
	}
})

const TT = Tip(() => (
	<div>hello, world</div>
))

const TTT = Tip(<div>hello, world</div>)

const AA = Tip(<Link label="赞" icon="zan"/>)

export default () => (
	<div className={cx({
		[style.root]: true,
	})}>
		<Code>{'Tip(..)'}</Code>
		<div>
			<T root={`.${styleApp.content}`} top tip="hello, world!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} bottom tip="hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} topLeft tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} topRight tip="hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} bottomLeft tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} bottomRight tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} left tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} right tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<TT root={`.${styleApp.content}`} right tip="hi, hi, hi, hi!"/>
		</div>
		<div>
			<AA root={`.${styleApp.content}`} right tip="hi, hi, hi, hi!"/>
		</div>
	</div>
)
